import React, { useState } from 'react'
import { Button, Menu, MenuButton, MenuItem, MenuItems,} from '@headlessui/react'
import './index.scss'


const index = () => {

  return (
    <div className="component-headless">
      <Button className="headless-btn">
        按钮
      </Button>
      <Menu>
        <MenuButton>Menu Button</MenuButton>
        <MenuItems anchor="bottom">
          <MenuItem>
            <a className="block data-[focus]:bg-blue-100" href="/settings">
              Settings
            </a>
          </MenuItem>
          <MenuItem>
            <a className="block data-[focus]:bg-blue-100" href="/support">
              Support
            </a>
          </MenuItem>
          <MenuItem>
            <a className="block data-[focus]:bg-blue-100" href="/license">
              License
            </a>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default index